<template lang="">
    <div>
        <myheader/>
        <van-tabs v-model="active">
                <van-tab title="用户名登录">
                        <van-field
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                      />
                      <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                      />
                      <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit" @click='login'>提交</van-button>
                      </div>

                </van-tab>
                <van-tab title="手机号登录">
                        <van-count-down :time="time" format='还剩ss秒' :auto-start="false"  v-show='isshow' ref="countDown" @finish='finish'/>
                        <van-form @submit="onSubmit">
                                <van-field
                                  v-model="mobile"
                                  name="mobile"
                                  label="手机号"
                                  placeholder="手机号"
                                  :rules="[{ required: true, message: '请填写手机号' }]"
                                />
                                <van-button type="primary" @click='sendSms'>发送验证码</van-button>
                                <van-field
                                  v-model="code"
                                  name="code"
                                  label="验证码"
                                  placeholder="验证码"
                                  :rules="[{ required: true, message: '请填写验证码' }]"
                                />
                                <div style="margin: 16px;">
                                  <van-button round block type="info" native-type="submit" @click='mlogin' name='btn1'>提交</van-button>
                                </div>
                              </van-form>
                </van-tab>
              
              </van-tabs>
    </div>
</template>
<script>
import myheader from '@/components/myheader'
export default {
    data() {
        return {
        active: 1,
        username:'',
        password:'',
        mobile:'',
        code:'',
        time:'30000',
        isshow:false,
        };
    },
    methods: {
        login(){
            alert('1')
        },
        mlogin(){
            //发送axios请求，mobile,code 
            this.$axios.post('users/login',{'mobile':this.mobile,'code':this.code}).then(res=>{
                //对结果进行解析
                if(res.data.code == 200){
                    //登录成功存储用户信息
                    localStorage.setItem('userid',res.data.userid)
                    localStorage.setItem('username',res.data.username)
                    alert('登录成功')
                    
                }else{
                    alert('登录失败')
                }
            })
        },
        //发送验证码
        sendSms(){
            this.$axios.post('users/sendsms',{'mobile':this.mobile}).then(res=>{
                if(res.data.code == 200){
                    alert(res.data.smscode)
                    //验证码发送成功后开始倒计时
                    this.isshow=true
                    this.$refs.countDown.start();
                }else{
                    alert(res.data.mes)
                }
            })
        },
        finish(){
            this.isshow=false
            this.$refs.countDown.reset();
        }
    },
    components:{
        'myheader':myheader
    }
}
</script>
<style lang="">
    
</style>